<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
      }
      /* css动态修改html字体的大小 */
      /* html{ */
      /* 动态设置根字体的大小为总宽度/10  */
      /* font-size: calc(100vw/10); */
      /* } */
      .box {
        width: 5rem;
        height: 100px;
        background-color: red;
        /* width: 2rem;
            height: 100px;
            border: 1px solid; */
        /* width: 50vw;
            height: 100vh;
            background-color: red; */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      //浏览器的onresize: 浏览器尺寸发生改变的时候执行
      /*  window.onresize = function () {
        console.log("浏览器窗口改变了");
      }; */

      //onresize: 做响应式页面
      //rem做响应式: rem布局  可以通过css 也可以通过js实现
      //rem单位: 是根字体(html标签的字体大小)的大小倍数
      //动态的修改 根字体的大小,保证无论在声明宽度下都是10rem*根字体大小 = 宽度px
      //js里总宽度 是innerWidth
      //css总宽度 100vw

      document.documentElement.style.fontSize = innerWidth / 10 + "px";
      window.onresize = function () {
        document.documentElement.style.fontSize = innerWidth / 10 + "px";
      };
    </script>
  </body>
</html>
